<template>
    <div>
        <template>
        <el-table v-loading.body="loading" :data="userList" border height="364" row-class-name="text-center">
            <el-table-column show-overflow-tooltip prop="nickname" label="昵称">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="mobile" label="手机号码">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="name" label="真实姓名">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="idCardNum" label="身份证号">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="applyTime" label="认证申请时间">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="option" label="审核">
                <template scope="scope">
                    <div @click='openPersonCertDetail(scope.$index, userList)'>
                        <div class="more-menu">
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <template>
        <div class="pagination-wrapper clearfix" v-if="userListPagination.totalPage>1">
            <div class="fr mt-15">
                <span class="page-num mr-25 font-14">
            总数：<span v-text="userListPagination.totalCount"></span> 每页显示
                <span v-text="userListPagination.pageSize"></span> 条 共
                <span v-text="userListPagination.totalPage"></span>页
                </span>
                <el-pagination @current-change ="personalUserListChange" :current-page="userListPagination.currentPage" :page-size="userListPagination.pageSize" layout="prev, pager, next"
                    :total="userListPagination.totalCount" class="fr">
                </el-pagination>
            </div>
        </div>
    </template>
    <!-- 待审核实名认证详情 -->
    <template>
        <el-dialog title="待审核实名认证详情" :visible.sync="certPersonalDialogStatus" @close="closeDialog('certPersonalForm')">
            <div>
                <el-row>
                    <el-col :span="8">
                        <span> 真实姓名：<span v-text="activeDialogData.name"></span></span>
                    </el-col>
                    <el-col :span="8">
                        <span> 身份证号：<span v-text="activeDialogData.idCardNum"></span></span>
                    </el-col>
                    <el-col :span="8">
                        <span> 认证申请时间：<span v-text="activeDialogData.applyTime"></span></span>
                    </el-col>
                </el-row>
            </div>
            <div class="person-cert-detail mt-25" v-loading="loadingCertDetail">
                   <el-row>
                        <el-col :span="8">
                            <img :src="personCertDetail.idCardFrontPhotoPath" alt="">
                        </el-col>
                        <el-col :span="8">
                            <img :src="personCertDetail.idCardBackPhotoPath" alt="">
                        </el-col>
                        <el-col :span="8">
                            <img :src="personCertDetail.idCardHoldPhotoPath" alt="">
                        </el-col>
                    </el-row>
            </div>
            <el-form :model="certPersonalForm" :rules="certPersonalFormRules" ref="certPersonalForm" class="mt-25">
                <el-form-item label="" prop="auditStatus">
                    <el-radio class="radio" v-model="certPersonalForm.auditStatus" label="2">通过</el-radio>
                    <el-radio class="radio" v-model="certPersonalForm.auditStatus" label="3" @change='fetchPersionalReasonList'>不通过</el-radio>
                </el-form-item>
                <el-form-item label="证件有效期至" prop="expireDate" v-if="certPersonalForm.auditStatus==2">
                    <el-date-picker v-model="certPersonalForm.expireDate" type="date" placeholder="选择日期" default-value>
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="原因分类" prop="reasonType" v-if="certPersonalForm.auditStatus==3">
                    <el-select v-model="certPersonalForm.reasonType" placeholder="请选择" @change="selectChange">
                        <el-option v-for="item in reasonList" :key="item.key" :label="item.key" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="提醒内容" prop="reason" v-if="certPersonalForm.auditStatus==3">
                    <el-input v-model="certPersonalForm.reason" type="textarea" auto-complete="off" placeholder="最多100个汉字"></el-input>
                </el-form-item>
            </el-form>
            <div class="text-right">
                <el-button @click="certPersonalDialogStatus = false">取 消</el-button>
                <el-button type="primary" @click="certPersonalSubmit('certPersonalForm')">确 定</el-button>
            </div>
        </el-dialog>

    </template>
    </div>
</template>
<script>
    import {
        getCertPersonalNotAudited,
        postCertPersonal,
        getPersonalCertDetail,
        getPersonalReasonList
    } from '@/api/user.js'
    export default {
        data () {
            return {
                loading: false,
                loadingCertDetail: false,
                // 用户列表
                userList: [
                // {
                //     id: 0,
                //     nickname: '破晓的清晨',
                //     mobile: '15210353215',
                //     name: '张莎莎',
                //     idCardNum: '123456789012345678',
                //     applyTime: '2017-02-14 17:00'
                // }
                ],
                // 用户列表翻页
                userListPagination: {
                    currentPage: 1,
                    pageSize: 1,
                    totalCount: 0,
                    totalPage: 1
                },
                // 认证信息表表单
                certPersonalForm: {
                    id: '',
                    auditStatus: '',
                    expireDate: '',
                    reasonType: '',
                    reason: ''
                },
                  // 认证信息表表单规则
                certPersonalFormRules: {
                    auditStatus: {
                        required: true,
                        message: '请选择是否通过',
                        trigger: 'blur'
                    },
                    expireDate: {
                        required: true,
                        type: 'date',
                        message: '请选择日期',
                        trigger: 'blur,change'
                    },
                    reasonType: {
                        required: true,
                        message: '请选择原因分类',
                        trigger: 'blur'
                    },
                    reason: {
                        required: true,
                        message: '请输入提醒内容',
                        trigger: 'blur'
                    }
                },
                // 个人认证详情
                personCertDetail: {},
                // 原因列表
                reasonList: [],
                // 弹出框内容
                activeDialogData: {},
                // 个人认证弹出框状态
                certPersonalDialogStatus: false
            }
        },
        methods: {
            selectChange (val) {
                this.certPersonalForm.reason = val
                console.log(val)
            },
            // 获取待办列表数据
            fetchCertpersonalNotAudited (data) {
                this.loading = true
                getCertPersonalNotAudited(data).then((response) => {
                    this.loading = false
                    if (response.data.code === 0) {
                        this.userList = response.data.data.data
                        this.userListPagination = response.data.data
                    } else if (response.data.code === 1) {
                        this.$message('获取失败')
                    } else throw response
                }).catch(function (err) {
                    this.loading = false
                    console.log(err)
                })
            },
            // 翻页
            personalUserListChange (page) {
                let param = {}
                param.currentPage = page
                param.pageSize = this.userListPagination.pageSize
                this.fetchCertpersonalNotAudited(param)
            },
            // 打开对话框
            openPersonCertDetail (index, data) {
                this.activeDialog(index, data, true)
                this.certPersonalDialogStatus = true
                // 先重置
                this.personCertDetail = {}
                this.fetchCertDetail(this.activeDialogData.id)
                this.certPersonalForm.id = this.activeDialogData.id
                this.fetchPersionalReasonList()
            },
            // 获取审核详情
            fetchCertDetail (id) {
                this.loadingCertDetail = true
                getPersonalCertDetail({id}).then((response) => {
                    this.loadingCertDetail = false
                    if (response.data.code === 0) {
                        this.personCertDetail = response.data.data
                    } else if (response.data.code === 1) {
                        this.$message('获取失败')
                    }
                }).catch(function (err) {
                    this.loadingCertDetail = false
                    console.log(err)
                })
            },
            // 对话框弹出，填写弹出框的显示数据
            activeDialog (index, data, isActive = false) {
                if (isActive) {
                    this.activeDialogData = data[index]
                } else {
                    this.activeDialogData = {}
                }
            },
            // 关闭对话框
            closeDialog (formName) {
                this.resetForm(formName)
            },
            // 重置表单
            resetForm (formName) {
                this.$refs[formName].resetFields()
            },
            // 个人认证提交审核信息
            certPersonalSubmit: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let data = this.certPersonalForm
                        postCertPersonal(data).then((response) => {
                            if (response.data.code === 0) {
                                this.$message('修改成功')
                                this.closeDialog(formName)
                                this.certPersonalDialogStatus = false
                            } else if (response.data.code === 1) {
                                this.$message('修改失败')
                            }
                            // 刷新列表
                            this.fetchCertpersonalNotAudited({
                                currentPage: this.userListPagination.currentPage,
                                pageSize: this.userListPagination.pageSize
                            })
                        }).catch(function (err) {
                            console.log(err)
                        })
                    }
                })
            },
            // 获取原因列表
            fetchPersionalReasonList: function () {
                getPersonalReasonList().then((response) => {
                    if (response.data.code === 0) {
                        this.reasonList = response.data.data
                    } else if (response.data.code === 1) {
                        // this.$message('修改失败')
                    }
                }).catch(function (err) {
                    console.log(err)
                })
            }
        },
        created () {
            this.fetchCertpersonalNotAudited()
        }

    }

</script>

